使用fetch()获取响应头的content

2023-12-09 12:45| 来源: 网络整理| 查看: 265

需求就是下载一个Excel文件，包括下载，导出，都是调用后端的接口。因为文件名返回再了响应头的content-disposition。前端需要进行一个处理，拿到文件名。

在这里插入图片描述先上代码

downloadDefaultExcelTemplate() { const url = process.env.BASE_API + '/sys/get_account_begin_temp/' const a = document.createElement('a') // 使用fetch方法获取response.headers响应头 fetch(url).then(res => { console.log('res', res) // 切割出文件名 const fileNameEncode = res.headers.get('content-disposition').split('filename=')[1] // 解码 const fileName = decodeURIComponent(fileNameEncode) console.log('fileName', fileName) // 使用blob()方法获取blob对象数据 res.blob().then( res => { console.log('bolbs', res) // 设置type类型 const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet; application/octet-stream' }) const fileUrl = window.URL.createObjectURL(blob) a.href = fileUrl console.log('url', fileUrl) a.setAttribute('download', fileName) a.style.display = 'none' a.click() a.remove() } ) }) },

这里使用fetch（）去调用，是因为需要拿到响应头。而我们项目封装的api，经过响应拦截，直接返回的是response.data。拿不到response的话，就没法拿到其中的headers。为了不影响全局的api使用，就对下载文件的方法，单独使用fetch来处理。

在这里插入图片描述

注意事项： fetch(url).then( res => res.blob() ) .then( blob =>{ } ) fetch(）的第一个then回调返回的是response，第二个then返回的才是后端的数据。但考虑到我需要获取文件名，并进行分割，解码等操作。所以我直接在fetch（）的第一个then里获取response之后进行代码逻辑的编写。我们需要将response转为blob对象数据，可以使用res.blob()方法。 decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

const blob = res.blob( ) // 这种写法是错误的，取到的是undefined 它的回调res才是真正想要的blob数据 res.blob().then(res=>{ console.log(‘blob值:’,res) })

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章